import React, { Component } from 'react';
import {
  View,
  Text,
  Animated,
  StyleSheet,
} from 'react-native';
import PxToDp from '../../../utils/PxToDp';

class PreferDetailsList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      widthAnim: new Animated.Value(0),
      flagBtn: this.props.flagBtn,
    };
  }
  componentDidMount() {
    const { rate } = this.props;
    const width = (115 * rate) / 100;
    Animated.timing(
      this.state.widthAnim,
      {
        toValue: PxToDp(width),
        duration: 2000,
      },
    ).start();
  }
  render() {
    return (
      <View style={[styles.flex, styles.row, { marginTop: PxToDp(29), paddingRight: PxToDp(20) }]}>

        <View style={styles.row}>
          {
          this.props.type === 'showColor'
          ?
            <View style={[styles.row, styles.colorIcon]}>
              <View
                style={[styles.triangleTopleft, { borderTopColor: this.props.color }]}
              />
              <View
                style={[styles.triangleBottomright, { borderBottomColor: this.props.color }]}
              />
            </View>
          :
          null
        }
          <View>
            <View style={[styles.textV, styles.row]}>
              <Text style={[styles.name]}>{this.props.name}</Text>
              <Text style={[styles.name]}>
                {this.props.flagBtn ? this.props.times : this.props.duration}
              </Text>
            </View>
            <View style={[styles.outBar, { width: this.props.type === 'showColor' ? PxToDp(280) : '100%' }]}>
              <Animated.View
                style={[styles.innerBar,
                  {
                    ...this.props.style,
                    width: this.state.widthAnim,
                  }]
                  }
              >
                {this.props.children}
              </Animated.View>
            </View>
          </View>
        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
  row: {
    flexDirection: 'row',
  },
  name: {
    color: '#8b8c8e',
    fontSize: PxToDp(15),
  },
  outBar: {
    height: PxToDp(8),
    backgroundColor: '#e7eeea',
    marginTop: PxToDp(6),
  },
  innerBar: {
    height: '100%',
    backgroundColor: '#f65252',
  },
  textV: {
    justifyContent: 'space-between',
  },
  triangleTopleft: {
    width: 0,
    height: 0,
    borderTopWidth: PxToDp(28),
    borderStyle: 'solid',
    borderRightWidth: PxToDp(28),
    borderRightColor: 'transparent',
    opacity: 0.7,
  },
  triangleBottomright: {
    width: 0,
    height: 0,
    borderStyle: 'solid',
    borderBottomWidth: PxToDp(28),
    borderLeftColor: 'transparent',
    borderLeftWidth: PxToDp(28),
    marginLeft: PxToDp(-28),
  },
  colorIcon: {
    paddingRight: PxToDp(10),
    paddingLeft: PxToDp(20),
  },
});

export default PreferDetailsList;
